<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/list.css">
    <link rel="stylesheet" href="./iconfont.css">
    <script src="./js/jquery-1.12.4.js"></script>
    <script src="./js/list.js"></script>
    <style>
       .a1 {
            background: url(./banggou/Veo_mbshop_spirit_pic.png) 0 -1060px no-repeat;
        }

        .a2 {
            background: url(./banggou/online_service.png) no-repeat
        }
    </style>

</head>
<body>
<script>
    $(function(){
        $.ajax({
            url:"./api/goodslist",
            type:"get"
        }).done(function(res){
            console.log(res)
            var strHtml=``;
            res.forEach(el => {
                strHtml +=`<div>
                <a href="./list.html?pid=${el.pid} "class="clearfixed">
                <p class="pho1 float_l">
                <img src="${el.pimg}">
            </p>
            <div class="float_l pho2">
                <p class="ph1">${el.pname}</p>
               <p> <span>商品编号：</span>
                <span>${el.bh}</span></p>
                <p class="ic">
                    <i class="iconfont icon-aixin"></i>
                    <i class="iconfont icon-aixin"></i>
                    <i class="iconfont icon-aixin"></i>
                    <i class="iconfont icon-aixin"></i>
                    <i class="iconfont icon-aixin"></i>
                </p>
            </div>
            <div class="float_l pho3">
                <p>
                    <span>颜色：</span>
                    <span>${el.color1[0].title}</span>
                </p>
                <p>
                     <span>尺码：</span>
                     <span>(${el.sizes[0]})</span>   
                </p>
            </div>
            <p class="float_l pho4" >
                <span>￥${el.old}</span>
                <span>￥${el.pprice}</span>
            </p>
            <p class="float_l pho5" >
                1
            </p>
            <p class="float_l pho6">
                ￥${el.pprice}
            </p>
           <div class="pho7 float_l">
               <button>加入购物车</button>
               
           </div>
           </div>
                `
            });
            $(".photo").html(strHtml);
        })
    })    
    
</script>
<div class="header">
    <div class="line1">
        <div class="main clearfix">
            <div class="left float_l">
                欢迎来到邦购网，全场实付满99元包邮，本网站多为断码限量商品，支持14天无理由退换货，不支持退差价，感谢理解。
            </div>
            <div class="right ">
                <ul class="clearfix">
                    <li class="c1">
                        登录
                        <div class="ri1">
                            <ul>
                                <li>
                                    <a>QQ账户登录</a>
                                    <a>支付宝登录</a>
                                    <a>微信账户登录</a>
                                </li>

                            </ul>
                        </div>
                    </li>
                    <li>注册</li>
                    <li class="c1 c2">我都邦购
                        <div class="bor"></div>
                        <div class=" ri1 ri2">
                            <ul>
                                <li>
                                    <a>我的订单</a>
                                    <a>我的积分</a>
                                    <a>我的点赞</a>
                                    <a>收货地址</a>
                                </li>

                            </ul>
                        </div>
                    </li>
                    <li>会员中心</li>
                    <li class="c1 c3"><img src="./banggou/Iphone-vertical.png" alt=""> 下载APP
                        <div class="bor"></div>
                        <img src="./images/mbshop_pic_mobile.png" class="ri1 ri3">
                    </li>
                    <li class="c4">
                        微博
                        <span class="ri4">新浪微博</span>
                    </li>
                    <li class="c1 ">
                        微信
                        <img src="./images/mbshop_pic_mobile.png" class="ri1 ri3 ri5">
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="center main">
    <p class="center1">商品展示列表</p>
    <div class="center2 ">
        <p class="name">
            <span class="span1">商品信息</span>
            <span class="span2">颜色尺码</span>
            <span class="span3">单价(元)</span>
            <span class="span4">数量</span>
            <span class="span5">小计</span>
            <span class="span6">操作</span>
            <i class="iconfont icon-gouwuche ic2"></i>
        </p>
        <div class="photo">
        </div>
    </div>

</div>



<div class="box8 main clearfixed">

        <img src="./images/zyshare01.png" class="tp1 float_l">
    
    
        <img src="./images/zyshare02.png" class="tp2 float_l">
    
        <img src="./images/zyshare03.png" class="tp2 float_l">
        <div class="tp3 float_l">
            <img src="./images/zsss.jpg" class="i2">
            <ul class="ig1">
                <li class="ii1 float_l">
                    <img src="./images/indexonline (1).png">
                    <p>在线客服</p>
                </li>
                <li class="ii1 float_l">
                    <img src="./images/indexopinion (1).png">
                    <p>意见反馈</p>
                    <li class="i3 float_l">
                        <img src="./images/indexsurvey (1).png">
                        <p>问卷调查</p>
                    </li>
                </li>
            </ul>
        </div>
    </div>
    
    <div class="box9 ">
        <p class="main xx1">联系方式</p>
    </div>
    <div class="box10 main">
        <p class="xx2">在线客服</p>
        <p>咨询电话：4008219988</p>
    </div>
    <div class="box11 main">
        <p class="xx3">CopyRight © 2000-2019,版权所有 上海美特斯邦威服饰股份有限公司沪ICP备05033127号|沪ICP证B2-20150114021-38119999 营业执照
        </p>
        <img src="./images/lz_beian_h40.png" class="be1">
        <img src="./images/lz_shgs_h40.png" class="be2">
        <img src="./images/brand_bottom_small.jpg">
    </div>
    <div class="huojian">
        <a class="a1" href="javascript:void(0)" id="a1">
        </a>
        <a href="" class="a2"></a>
    
    
    </div>
</body>
</html>